<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<title></title>
				<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 300px;
				height: 50px;
				background: cornsilk;
				margin-left: auto;
				margin-right: auto;
				margin-top: 150px;
				text-align: center;
			}
			.box>a{
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: silver;
				margin-left: 15px;
				margin-right: 15px;
				margin-top: 10px;
				line-height: 40px;
			}
			.box>a>span{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-image: url(https://account.xiaomi.com/static/res/166d6dc/account-static/respassport/acc-2014/img/icons_type.png);
				background-repeat: no-repeat;
			}
			.QQ{
				background-position: -18px 0;
			}
			.weibo{
				background-position: -37px 0;
			}
			.zhifubao{
				background-position: -57px 0;
			}
			.weixin{
				background-position: -84px 0;
			}

		</style>
	</head>

	<body>
		<div class="box">
			<a href="#"><span class="QQ"></span></a>
			<a href="#"><span class="weibo"></span ></a>
			<a href="#"><span class="zhifubao"></span></a>
			<a href="#"><span class="weixin"></span></a>
		</div>

	</body>

</html>